$(document).ready(function()
 {
    $('pre.wrapper, div.wrapper').hide();
    $('div.wrapper:first').show().addClass('active');
    $('h2.wrapper:first').addClass('active');
   
    //h2
    $('h2.wrapper').click(function()
    {
        $('h2.active').removeClass('active');
        $('div.wrapper').slideUp('slow');
        if($(this).next('div.wrapper').is(':hidden'))
        {
            $(this).addClass('active');
            $(this).next('div.wrapper').addClass('active');
            $(this).next('div.wrapper').slideDown('slow');
        }
    });
  
  //h3
  $('h3.wrapper, p.wrapper').click(function()
  {
    if($(this).next('pre.wrapper, div.wrapper').is(':hidden'))
    {
                $(this).addClass('active');
                $(this).next('pre.wrapper, div.wrapper').slideDown('slow');
    }
    else
    {
                $(this).removeClass('active');
                $(this).next('pre.wrapper, div.wrapper').slideUp('slow');
    }
  });
  
  
  $('h2.wrapper, h3.wrapper, p.wrapper').hover(
                function(){$(this).addClass('on');}//over
                ,function() {$(this).removeClass('on');} );//out
});
